<template>
  <div>
    <!-- 新增功能 -->
    <div style="margin-bottom: 10px">
      <el-button type="primary"  @click="handleAdd">新增</el-button>
    </div>
    <!-- 新增功能弹窗 -->
    <div>
      <el-dialog
      title="新增蓝牙基站"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
      <el-form-item label="蓝牙基站ID" prop="bluetoothId">
        <el-input v-model="form.bluetoothId"></el-input>
      </el-form-item>
      <el-form-item label="蓝牙基站名称" prop="bluetoothName">
        <el-input v-model="form.bluetoothName"></el-input>
      </el-form-item>
      <el-form-item label="创建人"  prop="creator">
        <el-input v-model="form.creator"></el-input>
      </el-form-item>
            <el-form-item label="描述信息" prop="des">
        <el-input v-model="form.des"></el-input>
      </el-form-item>
            <el-form-item label="管理区域" prop="region">
        <el-input v-model="form.region"></el-input>
      </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
      </el-dialog>
    </div>
    <!-- 表格渲染 -->
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="bluetoothId" label="蓝牙基站ID" width="180"></el-table-column>
        <el-table-column prop="bluetoothName" label="蓝牙基站名称" width="180"></el-table-column>
        <el-table-column prop="creator" label="创建人" width="180"></el-table-column>
        <el-table-column prop="des" label="描述信息" ></el-table-column>
        <el-table-column prop="region" label="管理区域" width="180"></el-table-column>
        <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="pagenum"
        :page-size="pagesize"
        :total=total
        @current-change="onCurrentChange">
      </el-pagination>
    </div>
    <!-- 编辑功能弹窗 -->
    <div>
      <el-dialog
      title="编辑蓝牙基站"
      :visible.sync="editDialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="140px">
      <el-form-item label="蓝牙基站名称" prop="bluetoothName">
        <el-input v-model="editForm.bluetoothName"></el-input>
      </el-form-item>
      <el-form-item label="更新人" prop="updator">
        <el-input v-model="editForm.updator"></el-input>
      </el-form-item>
            <el-form-item label="描述信息" prop="des">
        <el-input v-model="editForm.des"></el-input>
      </el-form-item>
            <el-form-item label="管理区域" prop="region">
        <el-input v-model="editForm.region"></el-input>
      </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </span>
      </el-dialog>
    </div>
    <!--  -->
  </div>
</template>
<script>
import { getBlueToothData, addBlueToothData, deleteBlueToothData ,updateBlueToothData} from '@/api/BlueTooth'

export default{
  data() {
    return {
      tableData:[],
      total:0,
      pagenum:1,
      pagesize:10,
      isEdit:false,
      dialogVisible:false,
      editDialogVisible:false,    
      form: 
      { bluetoothId:'',
        bluetoothName:'',
        creator:'',
        des:'',
        region:''},
      rules: { 
        bluetoothId: [
          { required: true, message: '请输入蓝牙基站ID', trigger: 'blur' },
        ],
        bluetoothName: [
          { required: true, message: '请输入蓝牙基站名称', trigger: 'blur' },
        ],
        creator: [
          { required: true, message: '请输入创建人', trigger: 'blur' },
        ],
        des: [
          { required: true, message: '请输入描述信息', trigger: 'blur' },
        ],
        region: [
          { required: true, message: '请输入管理区域', trigger: 'blur' },
        ],
      },
      editForm: 
      {
        bluetoothName:'',
        updator:'',
        des:'',
        region:'',
      bluetoothId:''
    },
      editRules: { 
        bluetoothName: [
          { required: true, message: '请输入蓝牙基站名称', trigger: 'blur' },
        ],
        updator: [
          { required: true, message: '请输入更新人', trigger: 'blur' },
        ],
        des: [
          { required: true, message: '请输入描述信息', trigger: 'blur' },
        ],
        region: [
          { required: true, message: '请输入管理区域', trigger: 'blur' },
        ],

      },
      formInline:
        { bluetoothId:'',
        bluetoothName:'',
        creator:'',
        des:'',
        region:''}
    }
  },
  mounted(){
    this.getBlueTooth()
  },
  methods:{
    // 获取蓝牙基站列表（列表查询接口）
    async getBlueTooth(){
      const res = await getBlueToothData({
        number: this.pagenum,
        size: this.pagesize})
      if(res.status === 200){
        console.log(res);
        this.total = res.data.data.bluetoothList.total
        this.tableData = res.data.data.bluetoothList.records
      }else{
        // 显示失败原因
        this.$message.error(res.data.message || '获取列表失败')
      }
    },
    // 新增蓝牙基站（新增接口）
    handleAdd(){
      this.dialogVisible = true
      this.form = { 
        bluetoothId:'',
        bluetoothName:'',
        creator:'',
        des:'',
        region:''
      }
      this.isEdit = false
    },
    // 保存蓝牙基站（新增接口）
     async save() {
      this.$refs.form.validate(async (valid) => {
    if (!valid) {
      // 如果验证不通过，则显示错误提示并返回
      this.$message.error('请检查输入项是否符合要求');
      return;
    }

    // 表单验证通过后执行新增逻辑
    const res = await addBlueToothData(this.form);
    console.log(res);

    if(res.data.code !== 200){
      this.$message.error('新增失败');
      return;
    } else {
      this.$message.success('新增成功');
      this.dialogVisible = false;
      await this.getBlueTooth();
    }
  });
    },
    // 编辑蓝牙基站（编辑接口）
    handleEdit(row){
      this.editDialogVisible = true
      this.editForm = { 
        bluetoothName:row.bluetoothName,
        updator:'',
        des:row.des,
        region:row.region,
        bluetoothId:row.bluetoothId
      }
    },
    // 更新蓝牙基站（更新接口）
    async update(){
       this.$refs.editForm.validate(async (valid) => {
    if (!valid) {
      // 如果验证不通过，则显示错误提示并返回
      this.$message.error('请检查输入项是否符合要求');
      return;
    }
      const res = await updateBlueToothData(this.editForm)
      console.log(res);
      
      if(res.data.code !== 200){
        // this.$message.error(res.data.message || '更新失败')
        this.$message.error('更新失败')
        return
      }else{
        this.$message.success('更新成功')
        console.log(res)
        this.editDialogVisible = false
        await this.getBlueTooth()
      }
      });
    },
    // 关闭弹窗
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});},
    // 删除蓝牙基站（删除接口）
    async handleDelete(row){
      try {
    await this.$confirm('此操作将永久删除该蓝牙基站, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });
    
    const res = await deleteBlueToothData(row.bluetoothId);
    console.log(res);
    await this.getBlueTooth();
    if (res.data.code === 200) {
      this.$message({
            type: 'success',
            message: '删除成功'
          });
      await this.getBlueTooth();
    } else {
      this.$message.error(res.data.message || '删除失败');
    }
  } catch (error) {
    if (error !== 'cancel') {
      this.$message.error('删除失败');
    }
  }
    },
    onCurrentChange(val){
      this.pagenum = val // 更新当前页码
      this.getBlueTooth() // 重新获取对应页数据
    }
      }
      }
  

  

</script>